<template>
  <!-- vue-touch滑动实践指令-->
  <div class="my-div">
    <v-touch v-on:swipeleft="onSwipeleft" v-on:swiperight="onSwipeRight" class="my-touch">
      <!-- 引导页会显示在这个嵌套路由中-->
      <router-view class="view"></router-view>
    </v-touch>
    <!-- 页面底部的圆点导航 -->
    <ul class="circle-nav">
        <li :class="{'nav-current':$route.name === 'page1'||$route.name === 'default'}"></li>
        <li :class="{'nav-current':$route.name === 'page2'}"></li>
        <li :class="{'nav-current':$route.name === 'page3'}"></li>
    </ul>
  </div>
</template>
<style>
html,
body {
    margin: 0;
    height: 100%;
}

#app>div {
    height: inherit;
}

.my-div,.my-touch,.view{
  height: 100%;
}

.circle-nav {
    position: fixed;
    bottom: 10px;
    width: 100%;
    max-width: inherit;
    text-align: center;
    padding: 0;
    opacity: 0.75;
}

.circle-nav li {
    display: inline-block;
    width: 7px;
    height: 7px;
    border: 1px solid #f44336;
    border-radius: 50%;
    margin: 5px;
}

.nav-current {
    background-color: #f44336;
}
</style>
<script>
export default {
  methods: {
    onSwipeleft () {
      // route转场后会自动触发vueg的转场特效
      switch (this.$route.name) {
        case 'default':
        case 'page1':
          this.$router.push({
            name: 'page2'
          })
          break
        case 'page2':
          this.$router.push({
            name: 'page3'
          })
          break
        case 'page3':
          console.log('准备进入登录页面')
          this.$router.push({
            name: 'login'
          })
      }
    },
    onSwipeRight () {
      this.$router.back()
    }
  }
}
</script>
